<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="app">
			<!-- 上面查询 -->
			<div class="query">
				<div class="query_top">
					<p>{{title}}</p>
				</div>
				<div class="query_bottom">
					<div class="query_name fl">
						<span class="item">{{name}}</span>
						<input type="text" class="item_name" v-model="query_name1">
					</div>
					<div class="query_name fl">
						<span class="item">{{state}}</span>
						<select name="" class="item_state" v-model="query_stater1">
							<option value=""></option>
							<option value="充足">充足</option>
							<option value="待补货">待补货</option>
						</select>
						<button class="querybtn" @click="querybtn">{{query_btn}}</button>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!-- 按钮 -->
			<div class="btn">
				<button class="add_form" @click="getaddbox">
					<i class="icon add"></i>
					<span>新增</span>
				</button>
				<button class="update_form" @click="updatabox">
					<i class="icon update"></i>
					<span>修改</span>
				</button>
				<button class="delete_form" @click="deledata">
					<i class="icon dele"></i>
					<span>删除</span>
				</button>
			</div>
			<!-- 表格 -->
			<div class="tbody_bottom">
				<table border="1" cellspacing="0" cellpadding="0">
					<thead>
						<tr>
							<th>
								<input type="checkbox">
							</th>
							<th>物品ID</th>
							<th>物品名称</th>
							<th>单价</th>
							<th>单位</th>
							<th>数量</th>
							<th>库存状态</th>
							<th>库存预测</th>
							<th>创建时间</th>
							<th>修改时间</th>
						</tr>
					</thead>
					<tbody >
						<tr v-for="item in list" :key='item.id'>
							<td>
								<input type="checkbox" 
										v-model="ids" 
										:value="item.item_id" 
										@change="updata(item)">
							</td>
							<td>{{item.item_id}}</td>
							<td>{{item.item_name}}</td>
							<td>{{item.item_price}}</td>
							<td>{{item.item_format}}</td>
							<td>{{item.item_total}}</td>
							<td>{{item.item_state}}</td>
							<td>{{item.item_inventory}}</td>
							<td>{{item.create_time}}</td>
							<td>{{item.update_time}}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 分页 -->
			<div class="info">
				<div class="info_left fl">
				总共{{total}}条记录,每页显示
					<select class="select_page" 
							v-model="pageSize" 
							@change="getpagelist">
						<option value ="5" selected>5</option>
						<option value ="10">10</option>
						<option value ="20">15</option>
					</select>
					条
				</div>
				<div class="page fr">
					<ul>
						<li class="prev" 
							@click="getPageNumber(pageNumber == 1?pageNumber:pageNumber-1)">上一页</li>
						<li v-for="item in pagenum" 
							@click="getPageNumber(item)"
							:class="{active :item == pageNumber?true:false}">{{item}}</li>
						<li class="next" 
							@click="getPageNumber(pageNumber == pagenum ?pageNumber:pageNumber+1)">下一页</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<!-- 添加 -->
			<div class="add_form_box" v-cloak v-show="add_disappear">
				<div  class="add_formcon">
					<p>添加物品</p>
					<div class="bot">
						<h3>物品名称</h3>
						<input type="text" placeholder="请输入物品名称" 
								v-model="item_name">
						<h3>单价（元）</h3>
						<input type="text" placeholder="请输入物品单价" 
								v-model="item_price">
						<h3>单位</h3>
						<input type="text" placeholder="请输入物品单位" 
								v-model="item_format">
						<h3>数量</h3>
						<input type="text" placeholder="请输入物品数量" 
								v-model="item_total">
						<h3>库存预警</h3>
						<input type="text" placeholder="请输入" 
								v-model="item_inventory">
						<div class="btn-bot">
							<button @click="cancel">取消</button>
							<button @click="determine">确定</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 修改 -->
			<div class="updata_form_box" v-cloak v-show="updata_disappear">
				<div  class="updata_formcon">
					<p>修改物品</p>
					<div class="bot">
						<h3>物品名称</h3>
						<input type="hidden" v-model="updata_id">
						<input type="text" placeholder="请输入物品名称" 
								v-model="updata_name">
						<h3>单价（元）</h3>
						<input type="text" placeholder="请输入物品单价" 
								v-model="updata_price">
						<h3>单位</h3>
						<input type="text" placeholder="请输入物品单位" 
								v-model="updata_format">
						<h3>数量</h3>
						<input type="text" placeholder="请输入物品数量" 
								v-model="updata_total">
						<h3>库存预警</h3>
						<input type="text" placeholder="请输入" 
								v-model="updata_inventory">
						<div class="btn-bot">
							<button @click="updata_cancel">取消</button>
							<button @click="updata_determine">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>
